<span page-title ng-model="hostCollection">{{ 'Host Collection: ' | translate }} {{ hostCollection.name }}</span>

<section data-extend-template="layouts/two-column-details.html">
  <div data-block="left-column">
    <h3 translate>Basic Information</h3>

    <dl class="dl-horizontal dl-horizontal-left">
      <dt translate>Name</dt>
      <dd bst-edit-text="hostCollection.name"
          readonly="denied('edit_host_collections', hostCollection)"
          on-save="save(hostCollection)">
      </dd>

      <dt translate>Description</dt>
        <dd bst-edit-textarea="hostCollection.description"
            readonly="denied('edit_host_collections', hostCollection)"
            on-save="save(hostCollection)">
        </dd>

      <dt translate>Content Hosts</dt>
      <dd>
        <a ui-sref="host-collection.hosts.add" ng-show="hostCollection.total_hosts === 0">
          {{ hostCollection.total_hosts }}
        </a>
        <a ui-sref="host-collection.hosts.list" ng-hide="hostCollection.total_hosts === 0">
          {{ hostCollection.total_hosts }}
        </a>
      </dd>

      <dt translate>Content Host Limit</dt>
      <dd bst-edit-custom="hostCollection.max_hosts"
          readonly="denied('edit_host_collections', hostCollection)"
          formatter="unlimitedFilter"
          formatter-options="hostCollection.unlimited_hosts"
          on-save="save(hostCollection)">

        <div class="form input">
          <div>
            <span translate>
              Unlimited Content Hosts:
            </span>
            <input type='checkbox' ng-model="hostCollection.unlimited_hosts"/>
          </div>
          <div ng-hide="hostCollection.unlimited_hosts" >
            <span translate>
              Limit:
            </span>
            <input ng-model="hostCollection.max_hosts"
                   name="max_hosts"
                   type="number"
                   min="1"
                   ng-required="!hostCollection.unlimited_hosts"
                   tabindex="2"/>
            <span class="note error" ng-show="hostCollection.max_hosts.$invalid">
              <ul><li ng-repeat="message in hostCollection.max_hosts.$error.messages">{{ message }}</li></ul>
            </span>
          </div>
        </div>
      </dd>
    </dl>
  </div>

  <div data-block="right-column">
    <h3 translate>Actions</h3>
    <div ng-if="hostCollection.total_hosts === 0">
      <p bst-alert='info'>
          <span translate>
            Add hosts to the host collection to see available actions.
          </span>
      </p>
    </div>

    <div ng-if="hostCollection.total_hosts > 0">
      <p translate>
        The following actions can be performed on content hosts in this host collection:
      </p>

      <ul class="list-unstyled">
        <li bst-feature-flag="remote_actions">
          <a translate ng-click ="openPackagesModal()">
            Package Installation, Removal, and Update
          </a>
        </li>

        <li bst-feature-flag="remote_actions">
          <a translate ng-click="openErrataModal()">
            Errata Installation
          </a>
        </li>

        <li>
          <a translate ng-click = "openHostCollectionsModal()">
            Host Collection Membership
          </a>
        </li>

        <li>
          <a translate ng-click = "openModuleStreamsModal()">
            Module Stream Management
          </a>
        </li>

        <li>
          <a translate ng-click="openSystemPurposeModal()">
            System Purpose Management
          </a>
        </li>

        <li bst-feature-flag="lifecycle_environments">
          <a translate ng-click="openEnvironmentModal()">
            Change assigned Lifecycle Environment or Content View
          </a>
        </li>

        <li bst-feature-flag="subscription_management" ng-hide="simpleContentAccessEnabled">
          <a translate ng-click="openSubscriptionsModal()">
            Subscription Management
          </a>
        </li>
      </ul>
    </div>
  </div>
</section>
